<template>
  <el-dialog
    title="菜单查看"
    :visible.sync="visible"
    width="40%"
    top="10vh"
    :before-close="closeDialogHandle"
    class="menu-view-dialog"
  >
    <el-form v-loading="dataLoad" ref="menuViewForm" label-width="85px">
      <el-form-item label="父级菜单">
        <el-input :value="menu.parentMenuName" readonly class="width95percent"></el-input>
      </el-form-item>
      <el-form-item label="菜单类型">
        <el-input :value="menu.type | baseFormat(typeEnumList)" readonly class="width95percent"></el-input>
      </el-form-item>
      <el-form-item label="菜单名称">
        <el-input :value="menu.name" readonly class="width95percent"></el-input>
      </el-form-item>
      <el-form-item label="菜单路径">
        <el-input :value="menu.path" readonly class="width95percent"></el-input>
      </el-form-item>
      <el-form-item label="权限标识">
        <el-input :value="menu.permit" readonly class="width95percent"></el-input>
      </el-form-item>
      <el-form-item label="菜单图标">
        <el-input :value="menu.icon" readonly class="width95percent">
          <svg-icon v-if="menu.icon" slot="prefix" :icon-class="menu.icon" style="height: 32px;width: 16px;"/>
        </el-input>
      </el-form-item>
      <el-form-item label="排序等级">
        <el-input :value="menu.sort" readonly class="width95percent"></el-input>
      </el-form-item>
      <el-form-item label="显示状态">
        <el-input :value="menu.display | baseFormat(displayEnumList)" readonly class="width95percent"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-input :value="menu.status | baseFormat(statusEnumList)" readonly class="width95percent"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer">
      <el-button @click="closeDialogHandle">关 闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    name: "menu-view-dialog",
    data() {
      return {
        // 弹出框显示状态[true-显示 false-隐藏]
        visible: false,
        // 菜单对象
        menu: {
          // 父级菜单名称
          parentMenuName: undefined,
          // 菜单类型[0-目录 1-菜单 2-按钮]
          type: undefined,
          // 菜单名称
          name: undefined,
          // 菜单路径
          path: undefined,
          // 权限标识(多个用逗号分隔，如：user:add,user:update)
          permit: undefined,
          // 菜单图标
          icon: undefined,
          // 排序等级
          sort: undefined,
          // 菜单状态[0-显示 1-隐藏]
          display: undefined,
          // 状态[true-可用 false-禁用]
          status: undefined
        },
        // 菜单类型枚举列表
        typeEnumList: [],
        // 菜单状态枚举列表
        displayEnumList: [],
        // 状态枚举列表
        statusEnumList: [],
        // 是否正在加载数据[true-是 false-不是]
        dataLoad: false,
      }
    },
    filters: {
      /**
       * 枚举映射方法
       * @param {number} value 参数值
       * @param {Array}  list  枚举列表
       */
      baseFormat(value, list) {
        for (let obj of list) {
          if (obj.value === value) {
            return obj.name;
          }
        }
        return '未知';
      }
    },
    methods: {
      /**
       * 初始化菜单查看弹出框方法
       * @param {string} menuId 菜单主键
       */
      initDialog(menuId) {
        // 打开弹出框
        this.visible = true;

        this.getMenuViewData(menuId);
      },
      /**
       * 获取菜单查看数据方法
       * @param {string} menuId 菜单主键
       */
      getMenuViewData(menuId) {
        // 加载数据
        this.dataLoad = true;
        this.$axios.$get('/sys/menu/view', { params: { menuId }})
          .then(({ data }) => {
            let _menu = this.menu;
            for (let propKey in _menu) {
              if (data.hasOwnProperty(propKey)) {
                _menu[propKey] = data[propKey];
              }
            }
            this.typeEnumList = data.typeEnumList;
            this.displayEnumList = data.displayEnumList;
            this.statusEnumList = data.statusEnumList;
          })
          .catch(() => {})
          .finally(() => {
            // 加载结束
            this.dataLoad = false;
          })
      },
      /**
       * 关闭弹出框事件
       */
      closeDialogHandle() {
        // 关闭弹出框
        this.visible = false;

        let _menu = this.menu;
        for (let propKey in _menu) {
          _menu[propKey] = undefined;
        }
        this.typeEnumList = [];
        this.displayEnumList = [];
        this.statusEnumList = [];
      },
    }
  }
</script>

<style scoped>
  .menu-view-dialog >>> .el-dialog__body {
    padding: 20px;
  }
  .menu-view-dialog .width95percent {
    width: 95%;
  }
  .menu-view-dialog .dept-tree {
    max-height: 300px;
    overflow-y: scroll;
  }
</style>
